<!-- 文章列表 -->
<template>
  <el-row class="sharelistBox">
    <el-col
      :span="24"
      class="s-item tcommonBox"
      v-for="(video, index) in playerOptions"
      :key="index"
    >
      <header>
        <h2>
          <i class="fa fa-fw fa-user"></i>发表于
          <i class="fa fa-fw fa-clock-o"></i
          ><span v-html="showInitDate(video.sources[0].upload_time, 'all')">{{
            showInitDate(video.sources[0].upload_time, "all")
          }}</span>
          •
        </h2>
        <span
          v-if="show"
          class="delete"
          @click="deleted(video)"
          style="float: right; margin-top: -40px; cursor: pointer"
          >删除视频</span
        >
      </header>
      <div class="article-content">
        <el-row :gutter="20">
          <el-col :span="24" :key="index">
            <div class="player-container">
              <video-player
                class="vjs-custom-skin"
                :options="playerOptions[index]"
              ></video-player>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { initDate, reqGetVideos, deleteVideo } from "../utils/server.js";
export default {
  name: "Viedo",
  data() {
    //选项 / 数据
    return {
      artId: 0,
      classId: 0,
      sendId: "",
      timer: null,
      className: "",
      classtwoId: 5,
      keywords: "",
      hasMore: true,
      show: false,
      level: 1,
      queryClass: 1,
      articleList: [],
      playerOptions: [],
    };
  },

  methods: {
    getDate() {
      reqGetVideos((msg) => {
        if (msg.code == 200) {
          msg.data.forEach((item) => {
            let arrStr = {
              live: true,
              playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0], // 播放速度
              autoplay: false, //如果true,浏览器准备好时开始回放。
              controls: true, //控制条
              preload: "auto", //视频预加载
              muted: true, //默认情况下将会消除任何音频。
              loop: false, //导致视频一结束就重新开始。
              language: "zh-CN",
              aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该								代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应						其容器。
              controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: true,
                currentTimeDisplay: true, // 当前时间
                volumeControl: true, // 声音控制键
                playToggle: true, // 暂停和播放键
                progressControl: true, // 进度条
                fullscreenToggle: true, // 全屏按钮
              },
              sources: item,
              poster: "", //你的封面地址
              width: document.documentElement.clientWidth,
              notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时
            };
            this.playerOptions.push(arrStr);
          });
        } else {
          this.$message({
            showClose: true,
            message: "获取视频失败！",
            type: "warning",
          });
        }
      });
    },
    //事件处理器
    showInitDate: function (oldDate, full) {
      // console.log(oldDate,full);
      return initDate(oldDate, full);
    },
    showSearchShowList: function (initpage) {
      //展示数据
      var that = this;
      that.classId =
        that.$route.query.classId == undefined
          ? 0
          : parseInt(that.$route.query.classId); //获取传参的classId
      that.keywords = that.$store.state.keywords; //获取传参的keywords
      that.classtwoId =
        that.$route.query.classtwoId == undefined
          ? ""
          : parseInt(that.$route.query.classtwoId); //获取传参的classtwoId
      that.sendId = that.classtwoId ? that.classtwoId : that.classId;
      that.level = that.keywords ? 0 : that.classtwoId ? 0 : 1;
      //判断当前显示的分类名称 以及子分类
      //初始化 文章id为0开始
      that.artId = initpage ? 0 : that.artId;
    },
    routeChange: function () {
      var that = this;
      this.showSearchShowList(true);
    },
    deleted(video) {
      this.$confirm("是否删除该视频", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        showConfirmButton: true,
        center: true,
        showCancelButton: true,
        cancelButtonText: "取消删除",
        confirmButtonText: "确认删除",
        beforeClose(type, instance, done) {
          if (type == "cancel") {
            done();
          } else {
            const videName = video.sources[0].src.split("/")[3];
            deleteVideo(videName, (msg) => {
              if (msg.status == 0) {
                this.$message({
                  showClose: true,
                  message: "删除视频成功！",
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "删除视频失败！",
                  type: "warning",
                });
              }
            });
            done();
            this.timer = setInterval(() => {
              location.reload();
            }, 500);
          }
        },
        type: "warning",
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "routeChange",
    "$store.state.keywords": "routeChange",
  },
  created() {
    var that = this;
    that.routeChange();
  },
  mounted() {
    this.getDate();
    if (localStorage.getItem("show") == "true") {
      this.show = true;
    }
  },
};
</script>

<style>
.delete:hover {
  color: skyblue;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/*分享标题*/
.shareTitle {
  margin-bottom: 40px;
  position: relative;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
}
.shareclassTwo {
  width: 100%;
}
.shareclassTwo li {
  display: inline-block;
}
.shareclassTwo li a {
  display: inline-block;
  padding: 3px 7px;
  margin: 5px 10px;
  color: #fff;
  border-radius: 4px;
  background: #64609e;
  border: 1px solid #64609e;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover {
  transform: translate(0, -3px);
  -webkit-transform: translate(0, -3px);
}
.shareclassTwo li a.active {
  background: #fff;
  color: #64609e;
}
/*文章列表*/
.sharelistBox {
  transition: all 0.5s ease-out;
  font-size: 15px;
}

/*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
        background: #48456C;
    }*/
</style>
